<template>
<!-- 设置个人中心页面不显示底部 -->
<div v-show="this.$route.path!='/me'" class="my-foot">
    <hr />
    <img src="../assets/foot.png" alt="" />
  <div class="cb">
  <img src="../assets/上升.png" id="sb" v-show="this.$route.path!='/MapContainer',this.$route.path!='/me'" @click="toTop"/>
  <img src="../assets/返回.png" @click="$router.go(-1)"/>
</div>
  </div>

  
</template>

<script>
export default {
  methods: {
    toTop() {//跳转到页面顶部
      let Gtop = document.documentElement.scrollTop || document.body.scrollTop;
      let timeTop = setInterval(() => {
        document.documentElement.scrollTop =
          document.body.scrollTop =
          Gtop -=
            100;
        console.log(Gtop);
        if (Gtop < 0) {
          clearInterval(timeTop);
        }
      }, 20);
    },
  },
  
};
  window.onscroll = function () {//滚动条距离大于300显示回到顶部按钮
  var t = document.documentElement.scrollTop || document.body.scrollTop;
  if (t >= 300) {
    sb.classList.add("active");
  } else {
    sb.classList.remove("active");
  }
}
</script>

<style lang="scss" scoped>
 
 
.my-foot {
  margin-top: 50px;
  width: 100%;
  height: 200px;
  overflow: hidden;
   .cb{
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  z-index: 100;
  height: 120px;
  width: 50px;
  border-radius: 10px;
  top:80%;
  left:2%;
  #sb{
    display: none;
    &.active{
      display: block;
    }
  }
    img{
      border-radius: 50%;
      box-shadow: 10px 10px 20px rgba($color: #000000, $alpha: 0.2);
      width:40px;
      height:40px;
      padding: 5px;
      margin: 0;
      background-color: rgb(255, 255, 255);
      transition: 0.5s;
      &:hover{
        transform: scale(1.15);
      }
    }
  }
  img {
    display: block;
    margin: 20px auto;
    width: 946px;
    height: 62px;
  }
}

</style>
